<template>
	<fui-vtabs ref="vtabsRef" :onScrollToLowerEvent="onScrollToLowerEvent" :linkage="false" tabWidth="160"
		:vtabs="vtabs" :activeTab="activeTab" @click="onTabClick">
		<fui-vtabs-content>
			<div v-if="panelDataArr.length">
				<fui-card @click="goArticle(index)" v-for="(item,index) in panelDataArr" :key="index"
					:margin="['25rpx', '32rpx']">
					<fui-panel :panelData="item"></fui-panel>
				</fui-card>
			</div>
			<fui-empty v-else src="/static/images/empty.png" title="还没有发布文章～"></fui-empty>
			<fui-loadmore v-if="noLoading" activeColor="#FFB703"></fui-loadmore>
			<fui-divider v-if="noArticle" text="没有更多文章了～"></fui-divider>
		</fui-vtabs-content>
	</fui-vtabs>
</template>

<script setup>
	import {
		ref,
		nextTick,
		reactive,
		getCurrentInstance,
		onMounted,
	} from 'vue'
	import {
		onShow,
		onHide,
		onLoad,
	} from "@dcloudio/uni-app"
	import {
		getParentCategoryApi,
		getContentByCategoryApi
	} from '../../api/index.js'
	import {
		showImage
	} from '../../config/index.js'
	const {
		proxy
	} = getCurrentInstance()
	let vtabsRef = ref(null)
	let vtabs = ref([])
	let panelDataArr = ref([])
	let activeTab = ref(0)
	let num = ref(10)
	let noArticle = ref(false)
	let noLoading = ref(false)
	const onTabClick = (e) => {
		// 修改导航栏标题
		changeGlobalTitle(e?.cate_Name)
		console.log(e)
		activeTab.value = e.index
		// 防止点击其他分类 数据还在原始位置
		panelDataArr.value = []
		contentScrollTopEvent()
		// 切换分类重置查询个数
		resetNum()
		// 切换分类重置默认查询数量
		getContentByCategory()
	}
	onLoad(() => {
		// 获取一级分类
		getParentCategory()

	})
	const resetNum = () => {
		num.value = 10
	}
	// 获取一级分类
	const getParentCategory = async () => {
		const {
			data
		} = await getParentCategoryApi(proxy)
		if (data?.code == 200) {
			vtabs.value = data.data.map(r => {
				return {
					...r,
					name: r.cate_Name || r.cate_Alias
				}
			})
			// 修改导航栏标题
			changeGlobalTitle(vtabs?.value[activeTab.value]?.cate_Name)
			// 根据分类获取文章
			getContentByCategory()
		}
	}

	// 根据分类获取文章
	const getContentByCategory = async () => {
		let params = {
			num: num.value,
			categoryID: vtabs.value[activeTab.value].cate_ID
		}
		const {
			data
		} = await getContentByCategoryApi(proxy, params)
		if (data?.code == 200) {
			panelDataArr.value = data.data.map(r => {
				return {
					...r,
					src: r.src?.match(/src=["']?([^\s"'<>]+)["']?/)[1] ||
						showImage
				}
			})
		}
	}

	// 页面触底
	let onScrollToLowerEvent = () => {
		if (num.value <= panelDataArr.value.length) {
			noLoading.value = true
			setTimeout(() => {
				num.value += 10;
				noLoading.value = false
				getContentByCategory()
			}, 1000)
		} else {
			noLoading.value = false
			noArticle.value = true
		}
	}

	let contentScrollTopEvent = () => {
		vtabsRef.value.contentScrollTop = 0
	}

	// 跳转文章页
	const goArticle = (index) => {
		uni.navigateTo({
			url: `/pages/article/index?articleId=${panelDataArr.value[index].log_ID}`
		});
	}

	// 修改全局导航栏标题
	const changeGlobalTitle = (title) => {
		// 修改导航栏标题
		wx.setNavigationBarTitle({
			title
		})
	}
</script>

<style lang="scss" scoped>
	:deep(.fui-vtabs__content-wrap) {
		max-width: calc(100% - 160rpx) !important;
	}

	:deep(.fui-vtabs__scroll-bar) {
		height: calc(100vh - 50rpx) !important;
	}
</style>
